<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item>考生列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="examinee_list_content">
        <!-- 搜索框 -->
        <el-row>
          <el-col :span="24">
            <div class="examinee_list_search">
              <div>按机构进行搜索：</div>
              <el-select
                v-model="checkedOguser"
                placeholder="请选择机构"
                size="mini"
                @change="checkedOguserChange"
                :clearable="true"
              >
                <el-option
                  v-for="item in checkedOguserList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
              <el-input
                v-model="searchKey"
                placeholder="请输入"
                size="mini"
                style="width: 250px; margin-left: 10px"
              ></el-input>
              <el-button
                type="primary"
                size="mini"
                style="margin-left: 5px"
                @click="searchFn()"
                >搜索</el-button
              >
            </div>
          </el-col>
        </el-row>
        <!-- 按钮栏 -->
        <el-row>
          <el-col :span="24">
            <div class="examinee_list_top">
              <el-button size="mini" type="primary" @click="examineeAdd()"
                >添加考生</el-button
              >
              <el-upload
                class="upload-demo"
                :action="actionUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :headers="headers"
                :name="uploadName"
                style="margin-left: 10px"
              >
                <el-button size="mini" type="primary">导入考生</el-button>
              </el-upload>
              <el-button
                size="mini"
                type="primary"
                style="margin-left: 10px"
                @click="downloadTemplateFn()"
              >
                下载模板
              </el-button>
            </div>
          </el-col>
        </el-row>
        <!-- 数据列表 -->
        <div
          v-if="examineeListData != undefined && examineeListData.length > 0"
        >
          <el-row>
            <el-col :span="24">
              <el-table
                :data="examineeListData"
                border
                size="mini"
                style="width: 100%"
                :cell-style="cellStyleFn"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="考生姓名"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="height"
                  label="身高"
                  width="80"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="identity_number"
                  label="证件号"
                  align="center"
                ></el-table-column>
                <!-- <el-table-column
                  prop="ogname"
                  label="所属机构"
                  align="center"
                ></el-table-column> -->
                <el-table-column
                  prop="real_level"
                  label="篮球等级"
                  align="center"
                  :formatter="formatterLevelFn"
                ></el-table-column>
                <el-table-column
                  label="证件照"
                  align="center"
                  :formatter="formatterHasImgFn"
                ></el-table-column>
                <el-table-column
                  label="操作"
                  width="260"
                  itemprop=""
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      class="examinee_delete_btn"
                      @click="examineeDetail(scope.$index, scope.row)"
                      >查看</el-button
                    >
                    <el-button
                      size="mini"
                      type="primary"
                      class="examinee_edit_btn"
                      @click="examineeEdit(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="examinee_list_pagination">
                <el-pagination
                  @size-change="listSizeChange"
                  @current-change="listCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="pageSizes"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                >
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row v-else>
          <el-empty description="暂无考生"></el-empty>
        </el-row>
      </div>
    </el-row>
  </div>
</template>
<style src="../../assets/css/examinee/examineeList.css" scoped></style>

<script>
export default {
  name: "ExamineeList",
  components: {},
  data() {
    return {
      baseAPIUrl: this.$store.state.baseAPIUrl,
      actionUrl: this.$store.state.baseAPIUrl + "/admin/excel/importAdminStu", // 上传路径
      uploadName: "excelfile",
      headers: {
        Authorization: this.$store.state.loginToken,
      }, // 上传用token
      examineeListData: [], // 考生列表
      currentPage: 1, // 当前页
      pageSizes: [10, 20, 50, 100], // 可选页容量
      pageSize: 10, // 当前页容量
      total: 0, // 总条数
      levelList: [], // 等级列表
      searchKey: "", //搜索关键词
      loadingKey: false,
      loadingText: "",
      checkedOguser: "", // 筛选-机构
      checkedOguserList: [], // 机构列表
    };
  },
  created: function () {
    this.getlevelListFn();
    this.getOguserListFn();
    this.getListDataFn();
  },
  methods: {
    // 搜索
    searchFn: function () {
      this.currentPage = 1;
      this.getListDataFn();
    },
    // 机构筛选
    checkedOguserChange: function (val) {
      this.checkedOguser = val;
      this.currentPage = 1;
      this.getListDataFn();
    },
    // 获取等级列表数据
    getlevelListFn: function () {
      let that = this;
      let url = "/mobile/levelText";
      let data = {};
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            let list = [
              {
                key: 0,
                value: "无",
              },
            ];
            response.level_list.forEach(function (item) {
              let obj = {
                key: item.level,
                value: item.title,
              };
              list.push(obj);
            });
            that.levelList = list;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取机构列表数据
    getOguserListFn: function () {
      let that = this;
      let url = "/admin/users/index";
      let data = {
        type: 2,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            let list = [
              {
                key: 0,
                value: "无",
              },
            ];
            response.user_info.forEach(function (item) {
              let obj = {
                key: item.id,
                value: item.name,
              };
              list.push(obj);
            });
            that.checkedOguserList = list;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取列表数据
    getListDataFn: function () {
      let that = this;
      let url = "/admin/students/index";
      let data = {
        page: this.currentPage,
        perPage: this.pageSize,
        keywords: this.searchKey,
        oguser_id: this.checkedOguser,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.examineeListData = response.stu_info;
            that.total = response.total_count;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 新增考生
    examineeAdd: function () {
      this.$router.push({
        name: "ExamineeFrom",
        params: {
          key: 1,
        },
      });
    },
    // 修改考生
    examineeEdit: function (index, row) {
      this.$router.push({
        name: "ExamineeFrom",
        params: {
          id: row.id,
          key: 2,
        },
      });
    },
    // 查看考生
    examineeDetail: function (index, row) {
      const routeUrl = this.$router.resolve({
        name: "ExamineeFrom",
      });
      let params = {
        id: row.id,
        key: 3,
      };
      this.$store.commit("set_examineeDetailParams", params);
      window.open(routeUrl.href, "_blank");
    },
    // 考试等级格式化
    formatterLevelFn: function (row) {
      let real_level = row.real_level;
      let text = "";
      this.levelList.forEach(function (item) {
        if (item.key == real_level) {
          text = item.value;
        }
      });
      return text;
    },
    // 页容量改变
    listSizeChange: function (val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getListDataFn();
    },
    // 当前页改变
    listCurrentChange: function (val) {
      this.currentPage = val;
      this.getListDataFn();
    },
    // 上传成功钩子
    handleAvatarSuccess: function (res) {
      if (res.code == 1) {
        this.$message.error(res.msg);
      } else {
        this.$message.success("导入成功");
      }
      this.getListDataFn();
    },
    // 上传前钩子
    beforeAvatarUpload: function (file) {
      let type = file.name.indexOf(".xlsx");
      if (type == -1) {
        this.$message.error("上传xlsx文件");
        return false;
      }
      return true;
    },
    // 下载模板
    downloadTemplateFn: function () {
      const link = document.createElement("a");
      // 这里是将链接地址url转成blob地址，
      fetch(this.baseAPIUrl + "/download/stu_import_demo1.xlsx")
        .then((res) => res.blob())
        .then((blob) => {
          link.href = URL.createObjectURL(blob);
          // 下载文件的名称及文件类型后缀
          link.download = "stu_import_demo1.xlsx";
          document.body.appendChild(link);
          link.click();
          // 在资源下载完成后 清除 占用的缓存资源
          window.URL.revokeObjectURL(link.href);
          document.body.removeChild(link);
        });
    },
    // 是否存在证件照格式化
    formatterHasImgFn: function (row) {
      let person_photo = row.person_photo;
      let text = "";
      if (
        person_photo == "" ||
        person_photo == null ||
        person_photo == undefined
      ) {
        text = "无";
      } else {
        text = "有";
      }
      return text;
    },
    // 设置单元格字体颜色
    cellStyleFn: function ({ row, columnIndex }) {
      let style = "";
      if (columnIndex == 5) {
        if (
          row.person_photo == "" ||
          row.person_photo == null ||
          row.person_photo == undefined
        ) {
          style = "color: #F6705E";
        } else {
          style = "color: #8ECF5F";
        }
      }
      return style;
    },
  },
};
</script>
